Pasos

Visión General del Componente

El Stepper en Emvi UI estructura flujos por pasos (wizards, checkouts, onboarding) en una secuencia clara y navegable. Comunica progreso, contexto actual y resultados de validación en cada paso, manteniendo paridad visual entre Figma y el código con Tailwind. Soporta recorridos lineales y no lineales, indicadores numéricos o de ícono, densidades compactas y cómodas, y tokens conscientes de tema, optimizado para equipos de diseño y front-end que trabajan con stepper UI, stepper design y stepper UX.

Guía de los usuarios a través de pasos secuenciales

El componente de pasos es esencial para dividir procesos complejos en pasos manejables dentro de las interfaces de usuario. Representa visualmente el progreso a través de una serie de pasos lógicos y numerados, asegurando que los usuarios tengan una comprensión clara de su posición actual y del flujo de trabajo general.

Mejora de la navegación y la interacción

Además del progreso, los pasos también pueden servir como una ayuda de navegación, permitiendo a los usuarios retroceder a pasos anteriores o saltar a pasos posteriores. Esta flexibilidad se adapta a las necesidades y preferencias de los usuarios, proporcionando una experiencia de navegación fluida e intuitiva.

Personalización y adaptabilidad

Los componentes de pasos modernos ofrecen opciones de personalización como etiquetas de pasos, iconos, animaciones e indicadores de progreso. Esto permite a los diseñadores adaptar la apariencia y el comportamiento de los pasos para que coincida con la identidad visual y los requisitos de usabilidad de su aplicación.

Tipos y Variantes

Variantes comunes:
- Horizontal (Lineal): pasos secuenciales con conectores; patrón principal Siguiente/Anterior.
- Horizontal (No lineal): navegación libre entre pasos visitados/validos.
- Vertical: etiquetas y contenido apilados; ideal para formularios largos.
- Compacto/Denso: paddings reducidos para UIs estrechas.
- Con Números / Con Íconos: contadores numéricos o íconos semánticos por paso.
- Ubicación Alternativa de Etiqueta: debajo, lateral o solo tooltip en anchos reducidos.
- Estados: actual, completado (check), error (badge), opcional (subtexto). Tokens de coherencia: stepper.step.size, stepper.icon, stepper.connector, stepper.state.current, stepper.state.complete, stepper.state.error, stepper.label.

Tamaños, Espaciado y Escala

Escalas SM/MD/LG:
- Indicadores: 20–24–28 px con conectores de 2 px por defecto.
- Espaciado de etiqueta: 6–8–10 px; conectores 12–16–20 px.
- Áreas táctiles: ≥44×44 px en pasos y controles clicables.
- Responsive: colapsar etiquetas a tooltips o cambiar a vertical bajo cierto ancho. Truncar etiquetas largas con elipsis y exponer el texto completo en title o tooltip. Las líneas base consistentes entre indicadores, etiquetas y ayudas mantienen el ritmo visual a través de breakpoints y temas.

Estados y Comportamiento

Estados clave: incompleto, actual, completado, error, deshabilitado y opcional. Los steppers lineales controlan el avance con validación; los no lineales permiten saltos a pasos visitados/validos. Mantén transiciones sutiles; confirma completado tras éxito del servidor cuando aplique. En operaciones asíncronas, muestra feedback y desactiva navegación hasta terminar. Teclado: flechas para moverse, Home/End para saltar, Enter/Espacio para activar. En móvil, desplaza el contenido actual a la vista al cambiar de paso.

Accesibilidad

Expón semántica de progreso con aria-current="step" en el disparador activo y enlaza disparadores y paneles con aria-controls/aria-labelledby. Usa role="tabpanel" en el contenido y alterna hidden/aria-hidden. Proporciona resúmenes de error por paso, no solo color. Respeta reducción de movimiento y gestiona foco de forma determinista: tras cambiar de paso, mueve el foco al encabezado o al primer campo del panel. Garantiza contraste suficiente en conectores, indicadores y etiquetas.

Integración con Figma y Tailwind

Figma ofrece variantes por orientación (horizontal/vertical), densidad (compacta/cómoda), indicador (número/ícono) y estado (actual/completado/error/deshabilitado). Auto Layout mantiene gaps y conectores consistentes; las propiedades del componente alternan etiquetas, ayudas y banderas de opcional. En Tailwind, compón con utilidades flex/gap, estilos de foco visible y variables CSS (p. ej., --step-connector, --step-current-bg, --step-complete-bg) para sincronizar temas entre claro/oscuro y paletas premium.

Buenas Prácticas de Implementación

- Mantén entre 3–7 pasos; fusiona micro-pasos en secciones inline cuando sea posible.
- Etiquetas concisas y orientadas a la acción; usa marcadores opcional/obligatorio con cuidado.
- Bloquea el avance solo en validaciones esenciales; permite Guardar y continuar.
- Persiste estado (local o servidor) en cada transición; protege contra recargas.
- Prefiere steppers verticales para formularios; horizontales para tareas breves.
- En móvil, auto-scroll al contenido actual y agrega un paso de revisión antes de enviar.